<!-- 我的申报 -->
<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';

const router = useRouter();
const reports = ref([]); // 申报列表数据
const isLoading = ref(true); // 加载状态

// 获取申报数据
const fetchReports = async () => {
  try {
    const response = await fetch('http://localhost:8080/api/reports');
    if (!response.ok) throw new Error('数据获取失败');
    reports.value = await response.json();
  } catch (error) {
    console.error('请求错误:', error);
    alert('获取申报数据失败');
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  fetchReports();
});

const onClickLeft = () => {
  router.push('/declare');
};
</script>

<template>
  <div class=''>
    <van-nav-bar title="我的申报" left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" style="position: fixed; width: 100%; z-index: 999;"/>
    
    <!-- 加载状态 -->
    <van-loading v-if="isLoading" vertical>加载中...</van-loading>

    <!-- 数据展示 -->
    <div v-else>
      <div v-for="item in reports" :key="item.id" class="box">
        <van-cell-group :title="`申报#${item.id}`">
          <!-- 显示图片（如果有） -->
          <img v-if="item.image_url" 
               :src="item.image_url" 
               alt="申报图片"
               class="png">
          
          <van-cell 
            :title="new Date(item.publish_time).toLocaleDateString()"
            :value="item.report_desc"
          />
          <van-cell title="处理状态" 
                    :value="item.is_intervened ? '已介入' : '未介入'"
                    value-class="status-cell" />
          <van-cell title="联系方式" 
                    :value="item.contact_info" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<style scoped>
.png {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.status-cell {
  color: #1989fa; /* 可自定义状态颜色 */
}

.box {
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>